<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .boy{
            display: flex;
            flex-wrap: wrap;
            width: 500px;
        }
        .boy div{
            text-align: center;
            margin: 10px;
            font-size: 20px;
        }
        img{
            width: 200px;
            height: 200px;
        }
    </style>
<body>
    <div class="boy">
    </div>
    <button onclick="fff()">购物车</button>
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
  <script>
    var arr=[{
        id:1,
        name:'水杯',
        img:'https://img14.360buyimg.com/jdcms/s480x480_jfs/t1/266358/40/24864/26569/67c13f08Fb14bca80/e2bf38a032000475.jpg.avif',
        Details:'【新品首发】网红可爱水杯双饮拎拎水壶大容量便携塑料杯子学生女 蓝白色800ml',
        Price:10,
        shu:1,
        is:false
    },{
        id:2,
        name:'苹果',
        img:'https://img12.360buyimg.com/jdcms/s480x480_jfs/t1/249056/27/27868/105439/67525f03F30761462/cd37f77fd52a2070.jpg.avif',
        Details:'京鲜生山东烟台红富士苹果 5斤装单果75-80mm生鲜水果 源头直发 包邮',
        Price:20,
        shu:1,
        is:false
    },{
        id:3,
        name:'鞋子',
        img:'https://img14.360buyimg.com/jdcms/s480x480_jfs/t1/261494/32/25354/115422/67c01f4dF12532211/2cd3a545894a2299.jpg.avif',
        Details:'名牌断码2025春季新款男鞋运动鞋轻便防滑爆米花底男士减震跑步鞋 NK2731白蓝橘 41',
        Price:30,
        shu:1,
        is:false
    },{
        id:4,
        name:'锅',
        img:'https://img14.360buyimg.com/jdcms/s480x480_jfs/t1/242123/21/28029/110909/6757df50F1e31a2ab/735f52d50f25d9b7.jpg.avif',
        Details:'欧迪鸟钛锅纯钛炒锅无涂层物理不粘锅炒菜锅家用圆底煎蛋锅煤气灶适用 32cm送锅盖 适用1~4人',
        Price:40,
        shu:1,
        is:false
    },]
    arr.forEach(item=>{
       $('.boy').append(`
       <div  onclick="fu(${item.id})"><img src="${item.img}" alt=""><br><span>${item.name}</span></div>`)
    })
    function fu(id){
       var a=arr.find(item=>item.id==id)
       location.assign("./详情页.html")
       localStorage.clear()
       localStorage.setItem('11',JSON.stringify(arr))
       localStorage.setItem('1',id)
    }
    function fff(){
        location.assign("./购物车.html")
    }
  </script>
</body>
</html>